import { maxTagPlaceholder } from '../../components/antdRenders';
import { Select } from 'antd';
import { FC, useState } from 'react';

export const SelectMore: FC = () => {
  const { Option } = Select;
  const [optionList, setOptionList] = useState([
    { id: '1', name: '字节跳动有限公司' },
    { id: '2', name: '掘金' },
    { id: '3', name: '下拉选项一名字还很长（气人不！数据就是这么任性啊）' },
    { id: '4', name: '知乎' },
    { id: '5', name: 'CSDN' },
    { id: '6', name: '高德地图' },
    { id: '7', name: '下拉选项二' },
    { id: '8', name: '下拉选项三' },
    { id: '9', name: '下拉选项四' },
    { id: '10', name: '下拉选项五' },
    { id: '11', name: '下拉选项六' },
    { id: '12', name: '下拉选项七' },
  ]);
  return (
    <Select
      style={{ width: '300px' }}
      mode="multiple"
      maxTagTextLength={5}
      maxTagCount={2}
      maxTagPlaceholder={(res: any) => {
        return maxTagPlaceholder(res);
      }}
      showSearch
      allowClear
      placeholder="请选择"
      optionFilterProp="children"
    >
      {optionList.map((item: any) => {
        return (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        );
      })}
    </Select>
  );
};
